<template>
  <!-- 只保留自定义审批 -->
  <el-popover
    v-if="type"
    ref="recordPopover"
    :popper-class="`record-popper ${showMobilePage ? 'mobile-popover' : ''}`"
    width="600"
    class="rel"
    placement="left"
    trigger="click">
    <Title title="版本记录" class="title"/>
    <div v-if="hasModifyContent" class="container">
      <!-- 基础字段修改 -->
      <template>
        <div v-for="baseItem in item.baseModifyList" :key="baseItem.key" class="center">
          <div class="dot"/>
          <!-- 自定义表单 -->
          <div v-if="baseItem.fieldType === 'richEditor' || baseItem.isSecret">
            <span class="content">{{ `【${baseItem.name}】` }}</span>
            <span>进行了修改</span>
          </div>
          <div v-else>
            <span class="content">{{ `【${baseItem.name}】` }}</span>
            <span class="mr10 value-text">{{ baseItem.oldValue || '--' }}</span>修改成<span class="ml10 value-text">{{ baseItem.newValue || '--' }}</span>
          </div>
        </div>
      </template>
      <!-- 列表字段修改 -->
      <template>
        <div v-for="listItem in item.subModifyList" :key="listItem.key">
          <!-- 列表修改 -->
          <div v-for="modifyItem in listItem.rowModifyList" :key="modifyItem.key">
            <div v-for="(fieldItem,fieldIndex) in modifyItem.fieldList" :key="fieldIndex" class="center">
              <div class="dot"/>
              <div v-if="fieldItem.isSecret">
                <span class="content">{{ `【${listItem.name}】 ` }}</span>
                <span class="content">{{ `第${modifyItem.row}行${`【${fieldItem.name}】`}` }}</span>
                <span v-if="fieldItem.isSecret">进行了修改</span>
              </div>
              <div v-else>
                <span class="content">{{ `【${listItem.name}】 ` }}</span>
                <span class="content">{{ `第${modifyItem.row}行${`【${fieldItem.name}】`}` }}</span>
                <span class="mr10 value-text">{{ fieldItem.oldValue || '--' }}</span>修改成<span class="ml10 value-text">{{ fieldItem.newValue || '--' }}</span>
              </div>
            </div>
          </div>
          <!-- 列表新增删除 -->
          <div v-for="(formItem,formIndex) in listItem.formChangeList" :key="formIndex" class="center">
            <div class="dot"/>
            <!-- 自定义表单 -->
            <div>
              <span class="content">{{ `【${listItem.name}】` }}</span>
              <span class="content">{{ `${typeMap(formItem.type)}第${formItem.row}行` }}</span>
            </div>
          </div>
        </div>
      </template>
    </div>
    <EmptyPlaceholder v-else empty-text="该版本未进行内容修改，仅进行了保存操作" mode="border" style="padding:12px 0 18px 0"/>
    <div slot="reference" class="item" @click="changeVersion(item)">
      <UserCard :user-data="item.user" :size="32" class="mr10"/>
      <div style="flex:1">
        <span class="userName">{{ item.user.userName }}</span><span class="text">修改了表单内容</span>
        <div class="time">{{ item.time | format('YYYY/MM/DD HH:mm') }}</div>
      </div>
      <slot/>
    </div>
    <i class="el-icon-close del-icon" @click="closePopover"/>
  </el-popover>
  <div v-else class="item" @click="changeVersion(item)">
    <UserCard :user-data="item.user" :size="32" class="mr10"/>
    <div style="flex:1">
      <span class="userName">{{ item.user.userName }}</span><span class="text">{{ item.isCreate ? '创建了表单' : '修改了表单内容' }}</span>
      <div class="time">{{ item.time | format('YYYY/MM/DD HH:mm') }}</div>
    </div>
    <slot/>
  </div>
</template>
<script>
import UserCard from '@/components/Common/userCard';
import Title from '@/components/Title';
import EmptyPlaceholder from '@/components/Common/emptyPlaceholder';

import { format } from '@/filters/date';
import { mapState } from 'vuex';

export default {
  components: {
    UserCard,
    Title,
    EmptyPlaceholder
  },
  filters: { format },
  props: {
    item: {
      type: Object,
      default: () => {}
    },
    type: {// 0固定表单 1自定义表单
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      currentVersion: 1
    };
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    }),
    hasModifyContent() {
      const item = this.item;
      return !!(item.baseModifyList && item.baseModifyList.length || item.subModifyList && item.subModifyList.length);
    }
  },
  methods: {
    changeVersion(item) {
      this.$emit('changeVersion', item);
    },
    typeMap(type) {
      return {
        1: '新增',
        3: '删除'
      }[type];
    },
    closePopover() {
      this.$refs.recordPopover.doClose();
    }
  }
};
</script>
<style lang="scss" scoped>
  .title {
    font-size: 16px;
    margin-bottom: 16px;
  }
  .container {
    height: 90vh;
    padding-top: 16px;
    border-top: 2px solid #f5f5f5;
    overflow: scroll;
  }
  .content {
    font-size: 14px;
    font-family: PingFang SC, PingFang SC-Medium;
    font-weight: 500;
    text-align: left;
    color: #333333;
  }
  .item {
    height: 68px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #ebeefd;
    cursor: pointer;
    padding-right: 16px;
  }
  .dot {
    width: 4px;
    height: 4px;
    background: #dddddd;
    border-radius: 2px;
    margin-right: 5px;
  }
  .center {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    padding-right: 10px;
  }
  .userName {
    font-size: 14px;
    font-family: PingFang SC, PingFang SC-Medium;
    font-weight: 500;
    text-align: left;
    color: #333333;
    margin-right: 8px;
  }
  .time, .text {
    font-size: 12px;
    font-family: PingFang SC, PingFang SC-Regular;
    font-weight: 400;
    text-align: left;
    color: #999999;
    margin-top: 9px;
  }
  .value-text {
    color: #f7c305;
  }
  .del-icon {
    position: absolute;
    top: 16px;
    right: 24px;
    font-size: 16px;
    cursor: pointer;
  }
</style>
<style lang="scss">
  .record-popper {
    height: 100vh;
    top: 0 !important;
    padding: 16px 0 0 24px !important;
    .popper__arrow {
      display: none;
    }
  }
  .mobile-popover {
    width: 100% !important;
  }
</style>
